<template>
  <div style="display: flex;flex-direction: column;align-items: center">
    <h2 style="color: #5b62e5">报寝情况</h2>
    <div style="display: flex;flex-direction: row;justify-content: flex-start">
      <span style="font-size: 20px;color:#5b62e5">成员一</span>
      <span style="margin-left: 50px; font-size: 20px;color:#5b62e5">李某某</span>
      <div style="margin-left: 50px;height: 30px">
        <el-switch style="height: 30px"  v-model="userstatus"></el-switch>
      </div>
    </div>
    <div style="margin-top: 20px; display: flex;flex-direction: row;justify-content: flex-start">
      <span style="font-size: 20px;color:#5b62e5">成员一</span>
      <span style="margin-left: 50px; font-size: 20px;color:#5b62e5">李某某</span>
      <div style="margin-left: 50px;height: 30px">
        <el-switch style="height: 30px"  v-model="userstatus1"></el-switch>
      </div>
    </div>
    <div style="margin-top: 20px; display: flex;flex-direction: row;justify-content: flex-start">
      <span style="font-size: 20px;color:#5b62e5">成员一</span>
      <span style="margin-left: 50px; font-size: 20px;color:#5b62e5">李某某</span>
      <div style="margin-left: 50px;height: 30px">
        <el-switch style="height: 30px"  v-model="userstatus2"></el-switch>
      </div>
    </div>
    <div style="margin-top: 20px; display: flex;flex-direction: row;justify-content: flex-start">
      <span style="font-size: 20px;color:#5b62e5">成员一</span>
      <span style="margin-left: 50px; font-size: 20px;color:#5b62e5">李某某</span>
      <div style="margin-left: 50px;height: 30px">
        <el-switch style="height: 30px"  v-model="userstatus3"></el-switch>
      </div>
    </div>
    <span style="margin-top:10px;height: 30px;  font-size: 20px;color:#5b62e5">应到人数     4人</span>
    <span style="margin-top:20px;height: 30px;  font-size: 20px;color:#5b62e5">实到人数     3人</span>
  </div>


</template>

<script>
export default {
  name: "dormitory",
  data() {
    return {
      userstatus:true,
      userstatus1:false,
      userstatus2:false,
      userstatus3:true
    }
  }
}

</script>

<style scoped>

</style>
